<template>
    <div class='home'>
        <div class="left">
            <van-icon name="wap-nav" class="main-icon" size="28"/>
            <div class="center">
                <div class="center1">
                    <van-icon name="search" size="25" color="#ACACAC"/>
                    <input type="text" @focus="$router.push('/search/main')" />
                </div>
            </div>
            <div class="right">
                <van-icon name="chat-o" size="28"/>
            </div>
        </div>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item class="my-image" v-for="v in banner" :key="v.id">
            <img :src="v.pic" alt="" />
        </van-swipe-item>
        </van-swipe>
        <ul class="nav">
            <li>
                <span><van-icon name="todo-list" size="26" color="red"  @click="godaily"/></span>
                <router-link class="tags" to="/daily"> 每日推荐</router-link>
            </li>
            <li>
                <span><van-icon name="invitation" size="26" color="red" @click="gofm"/></span>
                <router-link class="tags" to="/fm">私人FM</router-link>
            </li>
            <li>
                <span><van-icon name="column" size="26" color="red" @click="gosonglistsground"/></span>
                <router-link class="tags" to="/songsheet">歌单</router-link>
            </li>
            <li>
                <span><van-icon name="bars" size="26" color="red" @click="gorank"/></span>
                <router-link class="tags" to="/rank"> 排行榜</router-link>
            </li>
            <li>
                <span><van-icon name="live" size="26" color="red"/></span>
                <router-link class="tags" to="/rank"> 直播</router-link>
            </li>
        </ul>
        <!-- 推荐歌单 -->
        <div class="songbox">
            <div class="box-nav">
                <b>推荐歌单</b>
                <span class="morekuai  play" @click="gosonglistsground">更多
                <van-icon
                    name="arrow"
                    class="more"
                    size="16"
                />
                </span>
            </div>
            <div class="songlist">
                <div class="songimgbox">
                    <div class="songtag">
                    <van-swipe style="height: 100px;" vertical :autoplay="3000">
                        <van-swipe-item v-for="item in listOne" :key="item.id">
                            <img :src="item.picUrl" @click="gosongListDetail(item.id)"/>
                            <span class="songsheetplay"><van-icon name="replay" size="10"/>
                        {{(item.playCount / 10000).toFixed(1) + "万"}}</span>
                        </van-swipe-item>
                    </van-swipe>
                    
                    </div>
                    <p>随机 猜你喜欢✨</p>
                </div>
                <div class="songimgbox" v-for="item in songlist" :key="item.id">
                <div class="songtag">
                    <img
                    :src="item.picUrl"
                    :title="item.name"
                    @click="gosongListDetail(item.id)"
                    />
                    <span class="songsheetplay"><van-icon name="play" size="10"/>
                    {{(item.playCount / 10000).toFixed(1) + "万"}}</span>
                </div>
                <p>{{ item.name }}</p>
                </div>
            </div>
        </div>
        <!-- 新歌推荐 -->
        <div class="newsong">
            <div class="bar">
                <van-icon name="replay" size="20" @click="reloadsong"/>新歌推荐
                <span class="morekuai" @click="godaily">
                <van-icon name="play" class="more" size="16" />播放</span>
            </div>
            <ul>
                <li
                v-for="(item,i) in newsong"
                :key="item.id"
                @click="gosongDetail(item.id,i)"
                >
                <img :src="item.picUrl" alt="" />
                <div class="lists">
                        <span class="songname">{{ item.name }}</span>
                        <span class="singername" v-for="v in item.song.artists" :key="v.id"> - {{ v.name }}</span>
                        <br>
                        <span class="quality">SQ</span>
                        <span class="singername">{{item.song.alias[0]}}</span>
                        
                </div>
                <van-icon name="play-circle-o" size="21" color="#B3B3B3" />
                </li>
            </ul>
        </div>
        <!--  -->
    </div>
</template>

<script>
import { reqBannerAPI, RecommendAPI,RecommendAPI2,NewsongAPI,NewsongAPI2,newzhuanji } from "@/api/home.js";
export default {    
    data() {
        return {
            banner:[],
            songlist:[],
            listOne:[],
            newsong:[],
            limit:10,//点击新音乐刷新
        };
    },
    methods: {
        //轮播图
        async getBanner() {
            const result = await reqBannerAPI();
            /* console.log(result); */
            this.banner = result.data.banners;
        },
        //推荐歌单
        async getRecommend() {
            const result = await RecommendAPI();
            const result2 = await RecommendAPI2();
            this.songlist = result.data.result;
            //   console.log(result2.data.result)
            this.listOne = result2.data.result.splice(25);
        },
        // 新歌推荐
        async getNewsong() {
            const result = await NewsongAPI();
            //   console.log("新音乐", result);
            this.newsong = result.data.result;
            console.log(this.newsong)
        },
        // 新歌推荐刷新
        async reloadsong(){
            var limit = this.limit+10;
            const result = await NewsongAPI2(100);
            // console.log(result.data.result.splice(limit,10));
            this.newsong = result.data.result.splice(limit,10);
            this.limit = limit;
        },
        // 获取新专辑
        async getnewZhuanji(){
            const res = await newzhuanji();
            console.log(res);
        },
        //点击跳转歌单详情
        gosongListDetail(id) {
            this.$router.push(`/songlistdetail/${id}`);
        },
        //跳转每日推荐
        godaily() {
            this.$router.push("/daily");
        },
        //跳转私人FM
        gofm() {
            this.$router.push("/fm");
        },
        //跳转排行榜
        gorank() {
            this.$router.push("/rank");
        },
        //跳转歌单
        gosonglistsground() {
            this.$router.push("/songsheet");
        },
        //点击跳转歌曲详情
        gosongDetail(id,i) {
            document.querySelectorAll(".newsong li")[i].style.background = "#e9e9e9"
            this.$router.push(`/songdetail/${id}`);
        },
    },
    created() {
        this.getBanner();
        this.getRecommend();
        this.getNewsong();
        this.getnewZhuanji();
    },
    components: {

    },
}
</script>
<style scoped>
html,body{ width: 100%; height: 100%; overflow: scroll;}
html::-webkit-scrollbar, body::-webkit-scrollbar{width:0px;height:0px;}
body{margin:0;}
.home{
    width: 100%;
    overflow-x: hidden;
}
/* 头部 */
.left {
  width: 100%;
  height: 50px;
  background: #ECECEE;
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  z-index: 999;
}
.center {
  flex: 1;
}
.center1 {
  height: 35px;
  border-radius: 15px;
  margin: 0 8px;
  display: flex;
  align-items: center;
  background: rgb(243, 243, 243);
  padding: 0 10px;
  box-sizing: border-box;
}
.center1 input {
  width: 180px;
  border: none;
  background: rgb(243, 243, 243);
  padding-left: 5px;
}
.van-icon {
  font-size: 20px;
}
.title {
  font-size: 15px;
  margin-left: 5px;
}
/* banner */
.my-image {
  box-sizing: border-box;
  padding: 10px 10px 0 10px;
}
.my-swipe{
    background: #eeeeee;
    margin-top: 42px;
}
.my-swipe img {
  width: 100%;
  height: 150px;
  border-radius: 10px;
}
img {
  width: 100px;
  height: 100px;
}
.van-swipe .van-swipe__indicators .van-swipe__indicator{
    width: 8px;
    height: 2px;
    border-radius: 0;
}
/* 每日推荐 */
.nav {
  width: 100%;
  height: 100px;
  display: flex;
  margin-top: 10px;
  justify-content: space-around;
  align-items: center;
  border-bottom: 0.5px solid #e9e9e9;
  background-color: #f7f7f7;
  overflow-x: auto;
}
.nav li {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
}
.nav li:hover span{
    background-color: #e771941c;
}
.nav span {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fc7fa51c;
  text-align: center;
  line-height: 60px;
}
.tags {
  margin-top: 8px;
  color: #000;
}
/* 推荐歌单 */
::-webkit-scrollbar {
    display: none;
}
.songbox {
  width: 100%;
  height:200px;
  overflw: hidden;
  background-color: #fff;
  border-radius: 0 0 10px 10px;
}
.songbox .play{
     text-align: center;
     padding-left: 12px;
}
.songbox > p {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-top: 10px;
  padding: 5px 12px 0 12px;
}
.box-nav{
    height: 50px;
    line-height: 50px;
    padding: 0 10px 0 12px;
}
.box-nav .more {
  float: right;
  color: #000;
  line-height: 24px;
}
.box-nav b{
    font-size: 18px;
    font-weight: 700;
}
.morekuai {
  width: 65px;
  font-size: 16px;
  float: right;
  box-sizing: border-box;
  border: 1px #e5e5e5 solid;
  text-align: center;
  line-height: 24px;
  padding: 1px 5px 1px 1px;
  border-radius: 20px;
  margin-top: 10px;
  font-size: 14px;
}
.songimgbox {
  /* text-align: center; */
  width: 100px;
  height: 100px;
  font-size: 12px;
  margin-left: 10px;
}
.songtag {
  /* width: 100px; */
  height: 100px;
  text-align: center;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.songsheetplay {
  display: inline-block;
  box-sizing: border-box;
  padding: 2px 7px 2px 3px;
  background-color: rgba(0, 0, 0, 0.329);
  border-radius: 20px;
  color: #fff;
  position: absolute;
  top: 3px;
  right: 3px;
  font-size: 12px;
}
.songimgbox p {
  width: 100px;
  margin-top: 5px;
  /* white-space: nowrap;
  text-overflow: ellipsis; */
}
.songlist {
  width: 100%;
  height: 138px;
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  margin-left: 0;
  /* overflow-x: visible; */
}
.songlist-webkit-scrollbar {
  width: 0;
}
.songtag .van-swipe__indicators .van-swipe__indicator{
    display: none;
}
/* 新歌推荐 */
.newsong {
  margin-top: 10px;
  background-color: #fff;
  border-radius: 10px;
  padding-bottom: 50px;
  overflow: hidden;
}
.newsong img {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  vertical-align: middle;
}
.newsong li {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
}
.newsong .bar{
    height: 50px;
    font-size: 18px;
    font-weight: 600;
    margin-top: 10px;
    line-height: 50px;
    padding: 0 10px 0 12px;
}
.lists {
  border-bottom: 0.5px solid #e9e9e9;
  box-sizing: border-box;
  display: inline-block;
  width: 260px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-bottom: 5px;
}
.songname {
  font-size: 17px;
  font-weight: bold;
  color: rgb(58, 58, 58);
  /* line-height: 71px; */
  width: 90px;
  margin-bottom: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.singername {
  width: 230px;
  margin-left: 1px;
  margin-bottom: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #939394;
  font-size: 12px;
}
.quality {
  height: 14px;
  margin-top: 10px;
  color: #6FB7CA;
  box-sizing: border-box;
  display: inline-block;
  border: 1px solid #B8DBE4;
  border-radius: 3px;
  text-align: center;
  text-indent: 0em;
  font-size: 12px;
}
.singer {
  font-size: 12px;
  color: #9a9a9a;
  margin-left: 10px;
}

</style>
